<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影信息</title>
    <!-- <link rel="stylesheet" href="static/lib/bootstrap-4.6.2/bootstrap.min.css"> -->
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css">
    <script src="../static/lib/jquery-3.5.1.min.js"></script>
    <script src="../static/lib/layui/layui.js"></script>
    <!-- <script src="static/lib/bootstrap-4.6.2/bootstrap.min.js"></script> -->
</head>

<body>
<!-- 导航栏 -->
<ul th:replace="_fregments :: nav(0)" class="layui-nav m-pl-sm m-pr-sm">
    <img src="../static/favicon.ico" width="20px">
    <a href="#" class="logo">
        &nbsp;挚夕影院
    </a>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-home">&nbsp;</i>首页</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-windows">&nbsp;</i>电影</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-link">&nbsp;</i>影院</a></li>
    <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-tabs">&nbsp;</i>榜单</a></li>
    <span style="display: inline-block; width: 60%;">
            <div style="display: flex; padding-left: 20px;">
                <input type="text" name="title" required lay-verify="required" placeholder="找电影、影院"
                       autocomplete="off"
                       class="layui-input" style="width: 300px;">
                <button class="layui-btn" lay-submit lay-filter="formDemo"><i
                        class="layui-icon layui-icon-search">&nbsp;</i></button>
            </div>
        </span>

    <li class="layui-nav-item" style="text-align: right!important;">
        <a href=""><img src="../static/images/me.jpg" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退出</a></dd>
        </dl>
    </li>
</ul>

<!-- 内容 -->
<div class="layui-container" style="width: 100%; margin: 0%; padding: 0%;">

    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
            <!-- 背景开始-->
            <div class="bg">
                <div class="layui-row" style="margin-left: 10%; margin-right: 10%;  padding-top: 50px;">
                    <!-- 图片 -->
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                        <img th:src="@{${movie.poster}}" width="100%">
                    </div>
                    <!-- 描述开始 -->
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                        <div class="m-title m-mb m-ml" th:text="${movie.name}">
                            送你一朵小红花
                        </div>
                        <div class="m-tc-white m-ml m-mt-sm ">
                            <span class="m-mr" th:each="type : ${movie.types}" th:text="${type.name}"></span>
                        </div>
                        <div class="m-tc-white m-ml m-mt-sm ">
                            <span th:text="${movie.movieArea.name}"></span>
                            &nbsp;/&nbsp;
                            <span th:text="${movie.length}">128</span>
                            分钟
                        </div>
                        <div class="m-tc-white m-ml m-mt-sm ">
                            <span th:text="${#dates.format(movie.releaseDate, 'yyyy-MM-dd hh:mm:ss')}">2020-12-31 18:00:00</span>
                            <span th:text="${movie.movieArea.name}"></span>
                            上映
                        </div>
                        <div class="m-ml m-mt-big">
                            <a id="buyBtn" th:href="@{/cinema}" class="layui-btn layui-btn-normal" style="width: 200px;">
                                特惠购票
                            </a>
                        </div>
                    </div><!-- 描述结束 -->
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                        <div style="padding-top: 100px;">
                            <div class="m-tc-white">
                                口碑
                            </div>

                            <div class="layui-row">
                                <div id="scoreValue" th:text="${movie.movieRate.score}"
                                     class="layui-col-xs0 layui-col-sm2 layui-col-md2 m-tc-yellow m-ts-large">
                                    9.3
                                </div>
                                <div class="layui-col-xs0 layui-col-sm8 layui-col-md8">
                                    <div id="score"></div>
                                    <div class="m-tc-white">
                                        <span th:text="${movie.movieRate.rateNum}">100</span>
                                        人评分
                                    </div>
                                </div>
                            </div>
                            <div class="m-tc-white m-mt">
                                累计票房
                                <div class="m-ts-large" th:text="${movie.boxOffice}">
                                    1.4亿
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- 背景结束-->
        </div>
    </div>
    <!-- 下面正文 -->
    <div style="margin-left: 10%; margin-right: 10%;  padding-top: 50px;">
        <!-- 导航 -->
        <span class="layui-breadcrumb" lay-separator=">">
                <a th:href="@{/}">挚夕影院</a>
                <a th:href="@{/movie}">电影</a>
                <a>送你一朵小红花</a>
            </span>
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
                <!-- tab -->
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this m-tab" data-item="1">介绍</li>
                        <li class="m-tab" data-item="2">演职人员</li>
                        <li class="m-tab" data-item="3">图集</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" data-item="1">
                            <blockquote class="layui-elem-quote">剧情简介</blockquote>
                            <p th:text="${movie.introduction}" class="m-mt m-mb">
                                两个抗癌家庭，两组生活轨迹。影片讲述了一个温情的现实故事，思考和直面了每一个普通人都会面临的终极问题——想象死亡随时可能到来，我们唯一要做的就是爱和珍惜。
                            </p>
                            <blockquote class="layui-elem-quote">
                                演职人员
                                <a data-item="2" class="m-tab m-tc-gray" style="float: right;">全部&nbsp;></a>
                            </blockquote>
                            <!-- 人员分类 -->
                            <div class="layui-row" th:each="group : ${movie.actorGroup}">
                                <div th:text="${group.roleName}" style="color: #5FB878;">
                                    导演
                                </div>
                                <div th:each="actor : ${group.actors}" class="layui-col-xs4 layui-col-sm8 layui-col-md2 m-actor-photo">
                                    <img class="m-actor-photo" th:src="@{${actor.picture}}" width="100%">
                                    <div th:text="${actor.actorName}" class="m-tac">
                                        刘浩存
                                    </div>
                                </div>
                            </div>
                            <blockquote class="layui-elem-quote">
                                图集
                                <a data-item="3" class="m-tab m-tc-gray" style="float: right;">全部&nbsp;></a>
                            </blockquote>
                            <div class="layui-row">
                                <div th:each="picture : ${movie.pictureList}" class="layui-col-xs6 layui-col-sm8 layui-col-md4 m-actor-photo">
                                    <img th:src="@{${picture}}" width="100%">
                                </div>
                            </div>
                            <blockquote class="layui-elem-quote">
                                热门短评
                                <button class="layui-btn" style="float: right;">写短评</button>
                            </blockquote>

                            <!-- 评论列表 -->
                            <div class="layui-row">

                            </div>
                        </div>
                        <div class="layui-tab-item" data-item="2">
                            <!-- 人员分类 -->
                            <div class="layui-row" th:each="group : ${movie.actorGroup}">
                                <div th:text="${group.roleName}" style="color: #5FB878;">
                                    导演
                                </div>
                                <div th:each="actor : ${group.actors}" class="layui-col-xs4 layui-col-sm8 layui-col-md2 m-actor-photo">
                                    <img class="m-actor-photo" th:src="@{${actor.picture}}" width="100%">
                                    <div th:text="${actor.actorName}" class="m-tac">
                                        刘浩存
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" data-item="3">
                            <div th:each="picture : ${movie.pictureList}" class="layui-col-xs6 layui-col-sm8 layui-col-md4 m-actor-photo">
                                <img th:src="@{${picture}}" width="100%">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!--/*/<th:block th:replace="_fregments::script">/*/-->
<script src="../static/lib/jquery-3.5.1.min.js"></script>
<script src="../static/lib/layui/layui.js"></script>
<!--/*/</th:block>/*/-->
<script>
    layui.use(function () {
        var layer = layui.layer
            , form = layui.form,
            element = layui.element,
            carousel = layui.carousel;

        //建造实例
        carousel.render({
            elem: '#carousel1'
            , width: '100%' //设置容器宽度
            , height: '300px'
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        // layer.msg('Hello World');
        var rate = layui.rate
        var ins1 = rate.render({
            elem: '#score',  //绑定元素
            length: 10,
            value: $("#scoreValue").text(),
            half: true,
            readonly: true
        });
    });
    $(".m-tab").click(function (){
        var item = $(this).data('item')
        // 选项卡切换
        $("li.m-tab").removeClass('layui-this')
        $("li[data-item=" + item + "]").addClass('layui-this')
        //切换内容
        $(".layui-tab-item").removeClass("layui-show")
        $(".layui-tab-item[data-item=" + item + "]").addClass('layui-show')
    })

</script>
</body>

</html>